import 'package:flutter/material.dart';
import 'package:hrcapp/screens/spot_trade_screen.dart';
import 'package:hrcapp/screens/nft_trade_screen.dart';

class TradeScreen extends StatefulWidget {
  const TradeScreen({super.key});

  @override
  _TradeScreenState createState() => _TradeScreenState();
}

class _TradeScreenState extends State<TradeScreen> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this, initialIndex: 0);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F9FA),
      body: Column(
        children: [
          // 导航栏
          Container(
            height: 56,
            width: double.infinity,
            color: Colors.white,
            child: Stack(
              alignment: Alignment.center,
              children: [
                const Text(
                  '非遗交易',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF333333),
                  ),
                ),
                Positioned(
                  left: 16,
                  child: IconButton(
                    icon: const Icon(Icons.arrow_back),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              ],
            ),
          ),

          // 交易类型选择TabBar - 调整样式以匹配原型图，优化按钮长度
          Container(
            color: Colors.white,
            padding: const EdgeInsets.only(top: 12, bottom: 12, left: 16, right: 16),
            child: TabBar(
              controller: _tabController,
              tabs: const [
                // 使用SizedBox包裹Tab，确保两个按钮长度一致
                SizedBox(
                  width: 100,
                  child: Center(child: Text('NFT交易')),
                ),
                SizedBox(
                  width: 100,
                  child: Center(child: Text('币币交易')),
                ),
              ],
              labelColor: Colors.white,
              unselectedLabelColor: Color(0xFF999999),
              indicatorColor: Colors.transparent,
              labelPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              indicatorSize: TabBarIndicatorSize.tab,
              indicator: BoxDecoration(
                color: const Color(0xFF1890FF),
                borderRadius: BorderRadius.circular(20),
              ),
              unselectedLabelStyle: const TextStyle(fontSize: 14),
              labelStyle: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
              dividerHeight: 0,
              splashBorderRadius: BorderRadius.circular(20),
              isScrollable: false,
            ),
          ),

          // 主内容区域
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: const [
                // NFT交易页面内容
                NFTTradeScreen(),
                // 币币交易页面内容
                SpotTradeScreen(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}